<template>
  <div>
    {{ $t('home.userName') }}
    <el-button type="primary" @click="switchLanguage">切换语言</el-button>

    <button @click="getClick">获取router</button>

    <div>
      {{ store.userInfo.name }}
    </div>

    <div
      style="border: 1px solid red"
      class="d-flex flex-items-center gap-10 flex-justify-around"
    >
      <div>111</div>
      <div>222</div>
      <div>333</div>
    </div>

    <el-button type="primary" @click="testRequest">测试请求</el-button>

    <h1>Hello Word</h1>

    <el-button type="primary" @click="showMsg">成功消息</el-button>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { userInfo } from '@/store/userInfo'
import { testRequestFun } from '@/api/home'
import { ref } from 'vue'
import {ElMessage} from "element-plus";

const router = ref(useRouter())
const route = ref(useRoute())

// 获取路由信息
const getRouteInfo = () => {
  console.log(route.value.path)
  console.log(route.value.query)
  console.log(route.value.meta)
}

// 路由跳转并传参
const goAbout = () => {
  router.value.push({
    path: '/about',
    query: {
      id: '1',
    },
  })
}

const store = userInfo()

const getClick = () => {
  console.log(router.value)

  store.setUserInfo({
    name: '898989',
  })

  console.log(process.env)
}
const testRequest = () => {
  testRequestFun().then((res) => {
    console.log(res)
  })
}

const switchLanguage = () => {
  localStorage.setItem('i18n', 'en')
  window.location.reload()
}

const showMsg = () => {
  ElMessage.success("success")
}
</script>

<style scoped lang="scss">
h1{
  color: var(--primary-color)
}
</style>
